<template>
	<!-- Main content -->
	<section class='content'>
		<div class="box box-default">
			<div class="box-header with-border form-horizontal">
				<div class="row">
					<div class="col-md-3">
						<div class="form-group">
							<label class="col-md-4 control-label">姓名</label>
							<div class="col-md-8">
								<input class="form-control" placeholder="姓名">
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group">
							<label class="col-md-4 control-label">身份证号</label>
							<div class="col-md-8">
								<input class="form-control" placeholder="身份证号">
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group">
							<label class="col-md-4 control-label">手机</label>
							<div class="col-md-8">
								<input class="form-control" placeholder="手机">
							</div>
						</div>
					</div>

					<div class="col-md-3">
						<div class="form-group">
							<label class="col-md-4 control-label">评分等级</label>
							<div class="col-md-8 checkbox">
								<label>
									<input type="checkbox">A
								</label>
								<label>
									<input type="checkbox">B
								</label>
								<label>
									<input type="checkbox">C
								</label>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6">
						<div class="form-group">
							<label class="col-md-2 control-label">申请时间</label>
							<div class="col-md-10 form-inline">
								<div class="time_field">
									<span class="date"><input class="form-control"></span>
									<span class="break">至</span>
									<span class="date"><input class="form-control"></span>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group">
							<label class="col-md-4 control-label">审查员</label>
							<div class="col-md-8">
								<input class="form-control" placeholder="审查员">
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group">
							<label class="col-md-4 control-label">审批员</label>
							<div class="col-md-8">
								<input class="form-control" placeholder="审批员">
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6">
						<div class="form-group">
							<label class="col-md-2 control-label">审批状态</label>
							<div class="col-md-10 checkbox">
								<label>
									<input type="checkbox">待审批
								</label>
								<label>
									<input type="checkbox">审批中
								</label>
								<label>
									<input type="checkbox">已审批
								</label>
							</div>
						</div>
					</div>
					<div class="col-md-6">
						<div class="form-group">
							<label class="col-md-2 control-label">审批结论</label>
							<div class="col-md-10 checkbox">
								<label>
									<input type="checkbox">审批通过
								</label>
								<label>
									<input type="checkbox">审批拒绝
								</label>
								<label>
									<input type="checkbox">自动通过
								</label>
								<label>
									<input type="checkbox">自动拒绝
								</label>
							</div>
						</div>
					</div>
				</div>
				<div class="text-right">
					<button class="btn btn-default search_btn">搜索</button>
				</div>
			</div>

			<div class="box-body">
				<table class="table table-hover">
					<thead>
					<tr>
						<th>订单ID</th>
						<th>用户ID</th>
						<th>姓名</th>
						<th>身份证号</th>
						<th>手机号</th>
						<th>申请时间</th>
						<th>评分等级</th>
						<th>审批状态</th>
						<th>审批结论</th>
						<th>详情</th>
					</tr>
					</thead>
					<tbody>
					<tr v-for="order in fOrders">
						<td>{{order['id']}}</td>
						<td>{{order['userId']}}</td>
						<td>{{order['username']}}</td>
						<td>{{order['idNumber']}}</td>
						<td>{{order['phone']}}</td>
						<td>{{order['createtime'] | time}}</td>
						<td>{{order['mark']}}</td>
						<!--<td>{{order['investigationStatus'] | investigationStatus}}</td>-->
						<!--todo:这里可以封装成组件-->
						<template>
							<td v-if="order['approvalStaus']==1" class="text-info">审批中</td>
							<td v-if="order['approvalStaus']==2" class="text-success">审批完成</td>
							<td v-if="order['approvalStaus']==0" class="text-danger">未审批</td>
						</template>
						<template>
							<td v-if="order['approvalConclusion']===0"><span class="label label-danger">审批拒绝</span></td>
							<td v-if="order['approvalConclusion']===1"><span class="label label-success">审批通过</span></td>
							<td v-if="order['approvalConclusion']===null">&nbsp;</td>
						</template>
						<td><a @click="check(order)">查看</a></td>
					</tr>
					</tbody>
				</table>
			</div>
			<div class="box-footer">
			</div>
		</div>
		<div class="layer_custom_container layer_check_container" style="display:none">
			<div class="box box-primary">
				<div class="box-header with-border">
					<h3 class="box-title">基本信息</h3>
				</div>
				<div class="box-body">
					<div class="row">
						<div class="col-xs-4">
							<label>申请人：</label>
							<span>{{cOrder['order']['username']}}</span>
						</div>
						<div class="col-xs-4">
							<label>身份证：</label>
							<span>{{cOrder['order']['idNumber']}}</span>
						</div>
						<div class="col-xs-4">
							<label>手机号：</label>
							<span>{{cOrder['order']['phone']}}</span>
						</div>
					</div>
					<div class="row">
						<div class="col-xs-4">
							<label>自拍照：</label>
							<span><img :src="cOrder['userInfo']['myImageUrl']" width="120" height="90"></span>
						</div>
						<div class="col-xs-4">
							<label>身份证正面：</label>
							<span><img :src="cOrder['userInfo']['idPositiveImage']"  width="120" height="90"></span>
						</div>
						<div class="col-xs-4">
							<label>身份证反面：</label>
							<span><img :src="cOrder['userInfo']['idPositiveImage']" width="120" height="90"></span>
						</div>
					</div>
					<div class="row">
						<div class="col-xs-4">
							<label>评级结果：</label>
							<span>{{cOrder['order']['mark']}}</span>
						</div>
						<div class="col-xs-4">
							<label>居住地址：</label>
							<span>{{cOrder['userInfo']['residenceProvinces']}}{{cOrder['userInfo']['residenceCity']}}{{cOrder['userInfo']['residenceAddress']}}</span>
						</div>
						<!--<div class="col-xs-4">-->
						<!--<label>邮箱：</label>-->
						<!--<span>18523565656</span>-->
						<!--</div>-->
					</div>
					<hr>
					<div class="row">
						<div class="col-xs-4">
							<label>申请产品：</label>
							<span>{{cOrder['order']['productName'] | notescape}}</span>
						</div>
						<div class="col-xs-4">
							<label>申请时间：</label>
							<span>{{cOrder['order']['createtime'] | time}}</span>
						</div>
						<div class="col-xs-4">
							<label>申请金额：</label>
							<span>{{cOrder['order']['totalAmount']}}</span>
						</div>
					</div>
					<div class="row">
						<div class="col-xs-4">
							<label>贷款期限：</label>
							<span>{{cOrder['installment']['stageNumber']}}个月</span>
						</div>
					</div>
					<hr>
					<div class="row">
						<div class="col-xs-4">
							<label>公司全称：</label>
							<span>{{cOrder['userInfo']['companyName']}}</span>
						</div>
						<div class="col-xs-4">
							<label>公司地址：</label>
							<span>{{cOrder['userInfo']['companyProvinces']}}{{cOrder['userInfo']['companyCity']}}{{cOrder['userInfo']['companyAddress']}}</span>
						</div>
						<div class="col-xs-4">
							<label>公司性质：</label>
							<span>{{cOrder['userInfo']['companyNatureId']}}</span>
						</div>
					</div>
					<div class="row">
						<div class="col-xs-4">
							<label>发薪方式：</label>
							<span>银行代发</span>
						</div>
						<div class="col-xs-4">
							<label>入职时间：</label>
							<span>{{cOrder['userInfo']['entrytime']}}</span>
						</div>
					</div>
					<hr>
					<div class="row">
						<div class="col-xs-12">
							<label>直属亲戚联系人：</label>
							<span>{{cOrder['userInfo']['immediateUsername']}} {{cOrder['userInfo']['immediateRelationship']}} {{cOrder['userInfo']['immediatePhone']}}</span>
						</div>
					</div>
					<hr>
					<div class="row">
						<div class="col-xs-12">
							<label>其他联系人&emsp;&emsp;：</label>
							<span>{{cOrder['userInfo']['otherUsername']}} {{cOrder['userInfo']['otherRelationship']}} {{cOrder['userInfo']['otherPhone']}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="box box-primary">
				<div class="box-header with-border">
					<h3 class="box-title">审查内容</h3>
				</div>
				<div class="box-body form-horizontal">
					<div class="row form-group">
						<div class="col-xs-12"><strong>审查员：operator</strong></div>
					</div>
					<div class="row form-group">
						<label class="col-xs-2">本人身份确认</label>
						<div class="col-xs-4">{{cOrder['reviewInfo']['myConfirm'] | transReviewInfo}}</div>
						<div class="col-xs-6"><label>备注:</label>{{cOrder['reviewInfo']['myConfirmCm']}}</div>
					</div>
					<div class="row form-group">
						<label class="col-xs-2">消费意图判断</label>
						<div class="col-xs-4">{{cOrder['reviewInfo']['myJudgment'] | transReviewInfo}}</div>
						<div class="col-xs-6"><label>备注:</label>{{cOrder['reviewInfo']['myJudgmentCm']}}</div>
					</div>
					<template v-if="cOrder['order']['mark']=='C'">
						<hr>

						<div class="row form-group">
							<label class="col-xs-2">直系亲属身份确认</label>
							<div class="col-xs-4">{{cOrder['reviewInfo']['familyConfirmation'] | transReviewInfo}}</div>
							<div class="col-xs-6"><label>备注:</label>{{cOrder['reviewInfo']['familyConfirmationCm']}}</div>
						</div>

						<template v-if="cOrder['order']['mark']=='D'">
							<hr>
							<div class="row form-group">
								<label class="col-xs-2">联系人身份确认</label>
								<div class="col-xs-4">{{cOrder['reviewInfo']['contactConfirmation'] | transReviewInfo}}</div>
								<div class="col-xs-6"><label>备注:</label>{{cOrder['reviewInfo']['contactConfirmationCm']}}</div>
							</div>
						</template>
					</template>
				</div>
			</div>
			<div class="box box-primary">
				<div class="box-header with-border">
					<h3 class="box-title">审批结论</h3>
				</div>
				<div class="box-body form-horizontal">

					<div class="row form-group">
						<div class="col-xs-12"><strong>审批员：operator</strong></div>
					</div>
					<div class="row form-group">
						<div class="col-xs-12">
							<td v-if="cOrder['order']['approvalConclusion']==0"><span class="label label-danger">审批拒绝</span></td>
							<td v-if="cOrder['order']['approvalConclusion']==1"><span class="label label-success">审批通过</span></td>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="layer_custom_container layer_manage_container" style="display:none">
			<div class="box box-primary">
				<div class="box-header with-border">
					<h3 class="box-title">基本信息</h3>
				</div>
				<div class="box-body">
					<div class="row">
						<div class="col-xs-4">
							<label>申请人：</label>
							<span>{{cOrder['order']['username']}}</span>
						</div>
						<div class="col-xs-4">
							<label>身份证：</label>
							<span>{{cOrder['order']['idNumber']}}</span>
						</div>
						<div class="col-xs-4">
							<label>手机号：</label>
							<span>{{cOrder['order']['phone']}}</span>
						</div>
					</div>
					<div class="row">
						<div class="col-xs-4">
							<label>自拍照：</label>
							<span><img :src="cOrder['userInfo']['myImageUrl']" width="120" height="90"></span>
						</div>
						<div class="col-xs-4">
							<label>身份证正面：</label>
							<span><img :src="cOrder['userInfo']['idPositiveImage']"  width="120" height="90"></span>
						</div>
						<div class="col-xs-4">
							<label>身份证反面：</label>
							<span><img :src="cOrder['userInfo']['idPositiveImage']" width="120" height="90"></span>
						</div>
					</div>
					<div class="row">
						<div class="col-xs-4">
							<label>评级结果：</label>
							<span>{{cOrder['order']['mark']}}</span>
						</div>
						<div class="col-xs-4">
							<label>居住地址：</label>
							<span>{{cOrder['userInfo']['residenceProvinces']}}{{cOrder['userInfo']['residenceCity']}}{{cOrder['userInfo']['residenceAddress']}}</span>
						</div>
						<!--<div class="col-xs-4">-->
						<!--<label>邮箱：</label>-->
						<!--<span>18523565656</span>-->
						<!--</div>-->
					</div>
					<hr>
					<div class="row">
						<div class="col-xs-4">
							<label>申请产品：</label>
							<span>{{cOrder['order']['productName'] | notescape}}</span>
						</div>
						<div class="col-xs-4">
							<label>申请时间：</label>
							<span>{{cOrder['order']['createtime'] | time}}</span>
						</div>
						<div class="col-xs-4">
							<label>申请金额：</label>
							<span>{{cOrder['order']['totalAmount']}}</span>
						</div>
					</div>
					<div class="row">
						<div class="col-xs-4">
							<label>贷款期限：</label>
							<span>{{cOrder['installment']['stageNumber']}}个月</span>
						</div>
					</div>
					<hr>
					<div class="row">
						<div class="col-xs-4">
							<label>公司全称：</label>
							<span>{{cOrder['userInfo']['companyName']}}</span>
						</div>
						<div class="col-xs-4">
							<label>公司地址：</label>
							<span>{{cOrder['userInfo']['companyProvinces']}}{{cOrder['userInfo']['companyCity']}}{{cOrder['userInfo']['companyAddress']}}</span>
						</div>
						<div class="col-xs-4">
							<label>公司性质：</label>
							<span>{{cOrder['userInfo']['companyNatureId']}}</span>
						</div>
					</div>
					<div class="row">
						<div class="col-xs-4">
							<label>发薪方式：</label>
							<span>银行代发</span>
						</div>
						<div class="col-xs-4">
							<label>入职时间：</label>
							<span>{{cOrder['userInfo']['entrytime']}}</span>
						</div>
					</div>
					<hr>
					<div class="row">
						<div class="col-xs-12">
							<label>直属亲戚联系人：</label>
							<span>{{cOrder['userInfo']['immediateUsername']}} {{cOrder['userInfo']['immediateRelationship']}} {{cOrder['userInfo']['immediatePhone']}}</span>
						</div>
					</div>
					<hr>
					<div class="row">
						<div class="col-xs-12">
							<label>其他联系人&emsp;&emsp;：</label>
							<span>{{cOrder['userInfo']['otherUsername']}} {{cOrder['userInfo']['otherRelationship']}} {{cOrder['userInfo']['otherPhone']}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="box box-primary">
				<div class="box-header with-border">
					<h3 class="box-title">审查内容</h3>
				</div>
				<div class="box-body form-horizontal">
					<div class="row form-group">
						<div class="col-xs-12"><strong>审查员：operator</strong></div>
					</div>
					<div class="row form-group">
						<label class="col-xs-2">本人身份确认</label>
						<div class="col-xs-4">{{cOrder['reviewInfo']['myConfirm'] | transReviewInfo}}</div>
						<div class="col-xs-6"><label>备注:</label>{{cOrder['reviewInfo']['myConfirmCm']}}</div>
					</div>
					<div class="row form-group">
						<label class="col-xs-2">消费意图判断</label>
						<div class="col-xs-4">{{cOrder['reviewInfo']['myJudgment'] | transReviewInfo}}</div>
						<div class="col-xs-6"><label>备注:</label>{{cOrder['reviewInfo']['myJudgmentCm']}}</div>
					</div>
					<template v-if="cOrder['order']['mark']=='C'">
						<hr>

						<div class="row form-group">
							<label class="col-xs-2">直系亲属身份确认</label>
							<div class="col-xs-4">{{cOrder['reviewInfo']['familyConfirmation'] | transReviewInfo}}</div>
							<div class="col-xs-6"><label>备注:</label>{{cOrder['reviewInfo']['familyConfirmationCm']}}</div>
						</div>

						<template v-if="cOrder['order']['mark']=='D'">
							<hr>
							<div class="row form-group">
								<label class="col-xs-2">联系人身份确认</label>
								<div class="col-xs-4">{{cOrder['reviewInfo']['contactConfirmation'] | transReviewInfo}}</div>
								<div class="col-xs-6"><label>备注:</label>{{cOrder['reviewInfo']['contactConfirmationCm']}}</div>
							</div>
						</template>
					</template>
				</div>
			</div>
			<div class="box box-primary">
				<div class="box-header with-border">
					<h3 class="box-title">审批结论</h3>
				</div>
				<div class="box-body form-horizontal">

					<div class="row form-group">
						<div class="col-xs-12"><strong>审批员：operator</strong></div>
					</div>
					<div class="row form-group">
						<div class="col-xs-12 radio">
							<label>
								<input type="radio" v-model="cOrder['order']['approvalConclusion']" value="1">通过
							</label>
							<label>
								<input type="radio" v-model="cOrder['order']['approvalConclusion']" value="0">拒绝
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- /.content -->
</template>

<script type="text/ecmascript-6">
	import { mapGetters } from 'vuex'
	export default{
		data(){
			return {
				layer:{
					manage:'',
					check:''
				},
				cOrder:{
					//某一订单的全部相关信息
					order:{},
					userInfo:{},
					installment:{},
					repaymentPlan:[],
					reviewInfo:{}
				},
				//做过虑用的
				fOrders:[]

			}
		},
		computed:{
			...mapGetters([
				'orders',
			])
		},
		filters:{
			transReviewInfo(status){
				switch(status){
					case 'agreement':
						return "一致";
						break;
					case 'inconsistent':
						return "不一致";
						break;
					case 'notconfirmed':
						return "未确认";
						break;
					case 'abnormal':
						return "异常";
						break;
					case 'other':
						return "其他";
						break;
					case 'real':
						return "真实";
						break;
					case 'isfalse':
						return "虚假";
						break;
				}
			}
		},
		methods:{
			queryOrder(order){
				//todo return promise.all...暂时不想写；
				this.cOrder['order']=order;
				this.$store.dispatch('fetchOrderUserInfo',{userId:order['userId']}).then((info)=>{
					this.cOrder['userInfo']=info;
				})
				this.$store.dispatch('fetchOrderInstallment',{id:order['instalmentTypeId']}).then((info)=>{
					this.cOrder['installment']=info;
				})
				this.$store.dispatch('fetchOrderRepaymentPlan',{orderId:order['id']}).then((info)=>{
					this.cOrder['repaymentPlan']=info;
				})
				this.$store.dispatch('fetchOrderReviewInfo',{userId:order['userId']}).then((info)=>{
					this.cOrder['reviewInfo']=info;
				})
			},
			updateApproval(order,status){
				//todo return promise.all...暂时不想写；
				let updateApproval=this.$store.dispatch('updateApproval',{
					id:order['id'],
					status:this.cOrder['order']['approvalConclusion'],
				}).catch(()=>{})
				let updateApprovalStatus=this.$store.dispatch('updateApprovalStatus',{
					id:order['id'],
					status:status,
				}).catch(()=>{})
				return Promise.all([updateApproval,updateApprovalStatus]);
			},
			manage(order){
				this.queryOrder(order);
				setTimeout(()=>{
					console.obj(this.cOrder)
				},1000)
				let vue=this;
				this.layer.manage=layer.open({
					type: 1,
					area: ['900px','600px'],
					title: '审批',
					scrollbar: false,
					id: 'manage',
					content:$('.layer_manage_container'),
					btn:['保存为审批中','审批完成'],
					yes:function(){
						vue.updateApproval(order,1).then(function(){
							vue.fetchApprovalOrder();
							window.layer.close(vue.layer.manage);
						})
					},
					btn2:function(){
						vue.updateApproval(order,2).then(function(){
							vue.fetchApprovalOrder();
							window.layer.close(vue.layer.manage);
						})
						return false;
					}
				})
			},
			check(order){
				this.queryOrder(order);
				this.layer.check=layer.open({
					type: 1,
					area: ['900px','600px'],
					title: '审批详情',
					scrollbar: false,
					id: 'check',
					content:$('.layer_check_container'),
				})
			},
			search(){

			},
			fetchApprovalOrder(){
				this.$store.dispatch('fetchOrder').then(()=>{
					let orders=JSON.parse(JSON.stringify(this.orders));
					this.fOrders=orders;
				})
			}
		},
		mounted(){
			this.fetchApprovalOrder();
			this.$nextTick(function () {
			})
		},
		beforeDestroy(){
			//用户使用输入路由跳页的时候
			window.layer.close(this.layer.manage);
			window.layer.close(this.layer.check);
		}
	}
</script>
<style>
	.info-box {
		cursor: pointer;
	}

	.info-box-content {
		text-align: center;
		vertical-align: middle;
		display: inherit;
	}

	.fullCanvas {
		width: 100%;
	}
</style>
